<template>
  <div class="divBox" id="divBox1">
    <el-card class="box-card">
      <h4>提示，微信授权操作同一个公司仅限一个小程序，请谨慎操作</h4>
      <div>
        <!-- <h3>小程序绑定信息</h3> -->
        <div v-if="listInfo.shop && listInfo.shop.appid" class="list-shop">
          <div>
            <label>小程序名称：</label><span>{{ listInfo.shop.nickname }}</span>
          </div>
          <div>
            <label>小程序APPID：</label><span>{{ listInfo.shop.appid }}</span>
          </div>
          <div class="tubiao">
            <label>小程序图标：</label><img :src="listInfo.shop.cover" />
          </div>
          <div class="erwei">
            <label>小程序二维码：</label><img :src="listInfo.shop.qrcodeUrl" />
          </div>
        </div>
        <div class="div-else">
          <div v-if="!listInfo.shop">小程序暂未绑定</div>
          <el-button @click="upapplet" class="btn-class" v-if="!listInfo.shop">点击绑定</el-button>
          <el-button @click="upapplet" class="btn-class" v-else>重新绑定</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getAuthorization } from "@/api/article";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      listInfo: {},
      dialogVisible3: false,
      titleName: "",
      codeUrl: "",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    upapplet() {
      window.location.href=this.listInfo.pc
    },
    //二维码
    bindQRCode: function () {
      document.getElementById("qrCode").innerHTML = "";
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.codeUrl,
        width: 300,
        height: 300,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
    getlist() {
      getAuthorization().then((res) => {
        console.log(res);
        this.listInfo = res;
      });
    },
  },
};
</script>
<style lang="scss">
.divBox {
  .fanganid {
    img {
      margin: auto;
    }
  }
}
#divBox1 {
  h4 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f90000;
  }
  h3 {
    font-size: 16px;
    margin-top: 20px;
    color: #409eff;
  }
  .div-else {
    text-align: center;
    div {
      margin: 20px 0;
      font-size: 20px;
    }
  }
  .list-shop{
    div{
      font-size: 16px;
      margin-top: 20px;
      display: flex;
    }
     img{
         width: 200px;
         height: 200px;
     }
  }
}
</style>